import React from 'react'
import { Form, Input, Button, Select, Radio, DatePicker } from 'antd'

const { RangePicker } = DatePicker;

function SearchForm({onSearch}) {

    const onFinish = (values) => {
        onSearch({
            name: values.name,
            job: values.job,
            status: values.status,
            start_time: values.time ? values.time[0].format('YYYY-MM-DD') : undefined,
            end_time: values.time ? values.time[1].format('YYYY-MM-DD'): undefined
        })
    }

    const onReset =() => {
        onSearch({name:'',job:'', status:'', start_time:'', end_time:''})
    }

  return (
    <div>
      <Form onFinish={onFinish} onReset={onReset}>
        <Form.Item name='name' label="用户名">
            <Input />
        </Form.Item>
        <Form.Item name='job' label="岗位">
            <Select>
                <Select.Option value="销售助理">销售助理</Select.Option>
                <Select.Option value="销售员">销售员</Select.Option>
                <Select.Option value="总经理">总经理</Select.Option>
            </Select>
        </Form.Item>
        <Form.Item name='status' label="状态">
            <Radio.Group>
                <Radio value="1">开启</Radio>
                <Radio value="0">关闭</Radio>
            </Radio.Group>
        </Form.Item>
        <Form.Item name='time' label="时间">
            <RangePicker />
        </Form.Item>
        <Form.Item>
            <Button htmlType='submit'>搜索</Button>
            <Button htmlType='reset'>重置</Button>
        </Form.Item>
      </Form>
    </div>
  )
}

export default  React.memo( SearchForm );

